import QtQuick
import QtQuick.Controls

/*
  自定义组件：无边框标题栏（左侧按键菜单，中间标题，右侧最大化、最小化、关闭按键）
  依赖的自定义组件：ImageBtn.qml, SpinnerBtn.qml
*/
Rectangle {
    id: customHeaderBar
    width: 100
    height: 40
    color: "#24292e"

    signal spinnerBtnFileClicked(var index)
    signal spinnerBtnHelpClicked(var index)

    property alias leftSideWidth: leftSide.width
    property alias rightSideWidth: rightSide.width
    property alias titleText: titleText.text

    property color mTextColor: "#e1e4e8"
    property color spinnerColor: "#34393e"
    property color spinnerHoverColor: "#44484d"
    property int headerFontSize: 15
    property bool isMaximized: false

    Connections {
        target: root
        // 根窗口显示属性变化
        function onVisibilityChanged(visibility) {
            // 解决最大化时点击最小化 再点击任务栏显示界面不会显示最大化的问题
            if(isMaximized && (visibility === Window.Windowed)) {
                isMaximized = true
                setMaximizeOrRestore(isMaximized)
            }
        }
    }
    // 设置最大化或还原窗口 true:最大化 false:还原
    function setMaximizeOrRestore(flag) {
        if(flag) {
            maximizeBtn.ibUrl = "qrc:/imgs/restore.png"
            root.showMaximized()
        } else {
            maximizeBtn.ibUrl = "qrc:/imgs/maximize.png"
            root.showNormal()
            if(root.y < 0) root.y = 0 // 防止标题栏溢出屏幕上方
        }
    }

    // 左侧按键菜单区
    Item {
        id: leftSide
        height: parent.height
        anchors.left: parent.left

        Row {
            anchors.fill: parent

            SpinnerBtn {
                id: spinnerBtnFile
                width: 50
                height: parent.height
                sbBtnHeight: height
                sbBackColor: spinnerColor
                sbTextColor: mTextColor
                sbHoverColor: spinnerHoverColor
                sbTitleColor: customHeaderBar.color
                sbTitle: "文件"
                sbFontSize: headerFontSize
                // 固定用法 先定义下拉列表各按键名称
                property var spinnerBtnFileText: [ "退出" ]
                // 固定用法 修改以下id和变量名与之对应
                Component.onCompleted: {
                    for(var i = 0; i < spinnerBtnFileText.length; i++) {
                        spinnerBtnFile.sbListModel.set(i, { "mBtnText": spinnerBtnFileText[i] })
                    }
                }
                // 固定用法 下拉列表按键按下触发 index: 按键序号
                onSpinnerBtnClicked: function(index) {
                    spinnerBtnFileClicked(index)
                }
            }

            SpinnerBtn {
                id: spinnerBtnHelp
                width: 50
                height: parent.height
                sbBtnHeight: height
                sbBackColor: spinnerColor
                sbTextColor: mTextColor
                sbHoverColor: spinnerHoverColor
                sbTitleColor: customHeaderBar.color
                sbTitle: "帮助"
                sbFontSize: headerFontSize

                property var spinnerBtnHelpText: [ "使用说明", "关于软件" ]

                Component.onCompleted: {
                    for(var i = 0; i < spinnerBtnHelpText.length; i++) {
                        spinnerBtnHelp.sbListModel.set(i, { "mBtnText": spinnerBtnHelpText[i] })
                    }
                }

                onSpinnerBtnClicked: function(index) {
                    spinnerBtnHelpClicked(index)
                }
            }
        }
    }
    // 中间标题区
    MouseArea {
        id: centerSide
        width: parent.width - leftSide.width - rightSide.width
        height: parent.height
        anchors.left: leftSide.right
        acceptedButtons: Qt.LeftButton

        property point clickPos: "0,0"
        property point rootPos: "0,0"

        onPressed: {
            focus = true
            clickPos = Qt.point(user.getCursorPos().x, user.getCursorPos().y)
            rootPos = Qt.point(root.x, root.y)
        }

        onPositionChanged: {
            // 解决最大化时拖动顶部标题栏无法移动的问题 (最大化时恢复normal窗口的冲突问题)
            if(isMaximized) {
                var sss = user.getCursorPos().x / screen.width
                isMaximized = !isMaximized
                setMaximizeOrRestore(isMaximized)
                // 最大化拖动还原窗口时 按比例还原窗口相对于鼠标的位置
                root.setX(user.getCursorPos().x - root.width * sss)
                root.setY(user.getCursorPos().y)
                rootPos = Qt.point(root.x, root.y)
            }
            var delta = Qt.point(user.getCursorPos().x-clickPos.x, user.getCursorPos().y-clickPos.y)
            root.setX(rootPos.x + delta.x)
            root.setY(rootPos.y + delta.y)
        }

        onReleased: {
            // 松开时在屏幕最上方则最大化页面
            if(user.getCursorPos().y === 0) {
                isMaximized = true
                setMaximizeOrRestore(isMaximized)
            }
        }

        onDoubleClicked: {
            // 双击顶部标题栏缩放界面
            isMaximized = !isMaximized
            setMaximizeOrRestore(isMaximized)
        }

        AsText {
            id: titleText
            x: customHeaderBar.width / 2 - leftSide.width - width / 2
            height: parent.height
            text: qsTr("title")
            color: mTextColor
            font.pixelSize: headerFontSize
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    // 右侧功能按键区
    Row {
        id: rightSide
        height: parent.height
        anchors.left: centerSide.right

        ImageBtn {
            id: minimizeBtn
            width: parent.width / 3
            height: parent.height
            ibUrl: "qrc:/imgs/minimize.png"
            ibBackColor: customHeaderBar.color
            ibImgMarginWidth: 16
            ibImgMarginHeight: 10
            ibHoverColor: "#4F4F4F"

            onClicked: {
                focus = true
                root.showMinimized()
            }
        }
        ImageBtn {
            id: maximizeBtn
            width: parent.width / 3
            height: parent.height
            ibUrl: "qrc:/imgs/restore.png"
            ibBackColor: customHeaderBar.color
            ibImgMarginWidth: 16
            ibImgMarginHeight: 8
            ibHoverColor: "#4F4F4F"

            onClicked: {
                focus = true
                isMaximized = !isMaximized
                setMaximizeOrRestore(isMaximized)
            }
        }
        ImageBtn {
            id: closeBtn
            width: parent.width / 3
            height: parent.height
            ibUrl: "qrc:/imgs/close.png"
            ibBackColor: customHeaderBar.color
            ibImgMarginWidth: 16
            ibImgMarginHeight: 8
            ibHoverColor: "#FE1D00"

            onClicked: {
                focus = true
                root.close()
            }
        }
    }

}
